<template>
  <div>
    <operation-title
      title="选项卡"
      :icon="TitleIcon"
    />

    <div class="divider" />

    <div class="func">
      <p class="attr">
        选择风格
      </p>
      <ul class="common-ul">
        <li
          :class="pageConfig.tabStyle == '1' ? 'active' : ''"
          @click="changeTabStyle('1')"
        >
          <span>横向</span>
        </li>
        <li
          :class="pageConfig.tabStyle == '2' ? 'active' : ''"
          @click="changeTabStyle('2')"
        >
          <span>纵向</span>
        </li>
      </ul>
    </div>

    <div class="divider" />

    <div class="func">
      <p class="attr">
        颜色设置
      </p>
      <div class="adjust-item">
        <span style="width: 88px;text-align: left">组件背景</span>
        <el-color-picker v-model="pageConfig.bgcolor" />
        <span>{{ pageConfig.bgcolor }}</span>
      </div>
      <div class="adjust-item">
        <span style="width: 88px;text-align: left">商品背景</span>
        <el-color-picker v-model="pageConfig.goodsColor" />
        <span>{{ pageConfig.goodsColor }}</span>
      </div>
      <div class="adjust-item">
        <span style="width: 88px;text-align: left">选项卡背景</span>
        <el-color-picker v-model="pageConfig.tabColor" />
        <span>{{ pageConfig.tabColor }}</span>
      </div>
    </div>
    <div class="divider" />

    <div class="func">
      <p class="attr">
        选项卡设置
      </p>

      <div class="adjust-item">
        <span style="flex-shrink: 0">选中样式</span>

        <el-radio-group v-model="pageConfig.tabSelectedStyle" @change="changeTabSelectedStyle">
          <el-radio label="bordered">
            <div class="tab-selected tab-selected__bordered">
              选中
            </div>
          </el-radio>
          <el-radio label="underline">
            <div class="tab-selected tab-selected__underline">
              选中
            </div>
          </el-radio>
          <el-radio label="innerBg">
            <div class="tab-selected tab-selected__innerBg">
              选中
            </div>
          </el-radio>
        </el-radio-group>
      </div>

      <div class="sub-options">
        <div class="sub-option ">
          <p class="label label__88">
            文字颜色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.selectedcolor" />
          </span>
          <span class="value">{{ pageConfig.selectedcolor }}</span>
        </div>

        <div
          v-if="pageConfig.tabSelectedStyle === 'bordered'"
          class="sub-option"
        >
          <p class="label label__88">
            边框色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.selectedBorderColor" />
          </span>
          <span class="value">{{ pageConfig.selectedBorderColor }}</span>
        </div>

        <div
          v-if="pageConfig.tabSelectedStyle === 'underline'"
          class="sub-option "
        >
          <p class="label label__88">
            下划线颜色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.tablineColor" />
          </span>
          <span class="value">{{ pageConfig.tablineColor }}</span>
        </div>

        <div
          v-if="pageConfig.tabSelectedStyle === 'innerBg'"
          class="sub-option"
        >
          <p class="label label__88">
            背景色
          </p>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.selectBgColor" />
          </span>
          <span class="value">{{ pageConfig.selectBgColor }}</span>
        </div>
      </div>


      <div class="adjust-item">
        <span>标题未选</span>
        <el-color-picker v-model="pageConfig.unselectcolor" />
        <span>{{ pageConfig.unselectcolor }}</span>
      </div>

      <div class="adjust-item">
        <span>副标题</span>
        <el-radio-group v-model="pageConfig.subShow">
          <el-radio :label="false">
            关闭
          </el-radio>
          <el-radio :label="true">
            开启
          </el-radio>
        </el-radio-group>
      </div>

      <div
        v-if="pageConfig.subShow"
        class="sub-options"
      >
        <div class="sub-option">
          <span class="label">
            未选中
          </span>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.unsubColor" />
          </span>
          <span class="value">
            {{ pageConfig.unsubColor }}
          </span>
        </div>

        <div class="sub-option">
          <span class="label">
            选中
          </span>
          <span class="control-component">
            <el-color-picker v-model="pageConfig.selectedsubColor" />
          </span>
          <span class="value">
            {{ pageConfig.selectedsubColor }}
          </span>
        </div>
      </div>

      <div class="adjust-item">
        <span>边距</span>
      </div>

      <div class="sub-options">
        <div class="sub-option">
          <span class="label label__88">
            间距
          </span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.tabDistance"
              :min="0"
              :max="50"
              show-input
              size="small"
            />
          </span>
          <span class="value">px</span>
        </div>

        <div class="sub-option">
          <span class="label label__88">
            上边距
          </span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.tabMarginTop"
              :min="0"
              :max="50"
              show-input
              size="small"
            />
          </span>
          <span class="value">px</span>
        </div>

        <div class="sub-option">
          <span class="label label__88">下边距</span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.tabMarginBottom"
              :min="0"
              :max="50"
              show-input
              size="small"
            />
          </span>
          <span class="value">px</span>
        </div>

        <div class="sub-option">
          <span class="label label__88">左右边距</span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.tabMargin"
              :min="0"
              :max="50"
              show-input
              size="small"
            />
          </span>
          <span class="value">px</span>
        </div>
      </div>

      <div class="adjust-item">
        <span class="">圆角</span>
      </div>

      <div class="sub-options">
        <div class="sub-option">
          <span class="label label__88">上圆角</span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.bgRadiusTop"
              :min="0"
              :max="20"
              show-input
              size="small"
            />
          </span>
          <span class="value">
            px
          </span>
        </div>

        <div class="sub-option">
          <span class="label label__88">下圆角</span>
          <span class="control-component">
            <el-slider
              v-model="pageConfig.bgRadiusBottom"
              :min="0"
              :max="20"
              show-input
              size="small"
            />
          </span>
          <span class="value">
            px
          </span>
        </div>
      </div>

      <div class="adjust-item">
        <span>字体大小</span>
        <el-slider
          v-model="pageConfig.tabFontSize"
          :min="12"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>
    <div class="divider" />
    <div class="func func-expandable">
      <p
        class="attr attr-expandable"
        @click="isShowTabSetting = !isShowTabSetting"
      >
        选项卡内容
      </p>
      <div
        class="triangle-icon"
        :class="{
          'triangle-icon__reverse': isShowTabSetting
        }"
      />
      <ul
        v-if="pageConfig &&
          pageConfig.tabList &&
          pageConfig.tabList.length > 0
        "
        class="add-item"
        :class="{ 'add-item-shrink': !isShowTabSetting }"
      >
        <li
          v-for="(item, index) in pageConfig.tabList"
          :key="index"
          :class="currentIndex == index ? 'active' : ''"
          @click="chooseIndex(index)"
        >
          <div v-if="currentIndex != index">
            {{ item.title }}
          </div>
          <div v-else>
            <div class="adjust-item">
              <span>标题</span>
              <el-input
                v-model.trim="pageConfig.tabList[currentIndex].title"
                class="input-content"
                size="small"
                type="text"
                maxlength="20"
                :show-word-limit="true"
              />
            </div>
            <div
              v-if="pageConfig.subShow"
              class="adjust-item"
            >
              <span>副标题</span>
              <el-input
                v-model.trim="pageConfig.tabList[currentIndex].subtitle"
                class="input-content"
                size="small"
                type="text"
                maxlength="20"
                :show-word-limit="true"
              />
            </div>

            <div class="adjust-item adjust-item__start__radio">
              <span class="adjust-item__title">选择商品</span>
              <select-goods-setting
                :host-as="'adjust-item'"
                :page-config="item"
                :disable-types="['all']"
              />
            </div>
          </div>

          <div class="move-buttons">
            <el-icon
              v-show="index !== 0"
              class="icon-btn"
              title="上移"
              @click="moveTo('up', index)"
            >
              <Top />
            </el-icon>
            <el-icon
              v-show="index !== pageConfig.tabList.length - 1"
              class="icon-btn"
              title="下移"
              @click="moveTo('down', index)"
            >
              <Bottom />
            </el-icon>
            <el-icon
              class="icon-btn"
              @click.stop="removeTab(index)"
            >
              <RemoveFilled />
            </el-icon>
          </div>
        </li>
        <li
          class="extra-li"
          @click="addTab"
        >
          <p>+添加</p>
        </li>
      </ul>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        样式
      </p>
      <ul class="common-ul">
        <li
          :class="pageConfig.style == '1' ? 'active' : ''"
          @click="pageConfig.style = '1'"
        >
          默认
        </li>
        <li
          :class="pageConfig.style == '2' ? 'active' : ''"
          @click="pageConfig.style = '2'"
        >
          投影
        </li>
        <li
          :class="pageConfig.style == '3' ? 'active' : ''"
          @click="pageConfig.style = '3'"
        >
          描边
        </li>
      </ul>
      <div
        v-if="pageConfig.style == '3'"
        class="adjust-item"
      >
        <el-color-picker v-model="pageConfig.borderColor" />
        <span>{{ pageConfig.borderColor }}</span>
      </div>
      <div
        v-if="pageConfig.style == '3'"
        class="adjust-item"
      >
        <el-slider
          v-model="pageConfig.borderWidth"
          :min="0"
          :max="5"
          show-input
          size="small"
        />px
      </div>
    </div>

    <div class="divider" />
    <div
      v-if="pageConfig?.tabStyle === '1'"
      class="func"
    >
      <p class="attr">
        选择风格
      </p>
      <ul class="common-ul">
        <li
          :class="pageConfig.custom == '1' ? 'active' : ''"
          @click="pageConfig.custom = '1'"
        >
          <img
            src="../../../../../../assets/app/other/goods/goods-one.png"
            alt=""
          >
        </li>
        <li
          :class="pageConfig.custom == '2' ? 'active' : ''"
          @click="pageConfig.custom = '2'"
        >
          <img
            src="../../../../../../assets/app/other/goods/goods-two.png"
            alt=""
          >
        </li>
        <li
          :class="pageConfig.custom == '3' ? 'active' : ''"
          @click="pageConfig.custom = '3'"
        >
          <img
            src="../../../../../../assets/app/other/goods/goods-three.png"
            alt=""
          >
        </li>
      </ul>
    </div>
    <div class="divider" />

    <!--    显示内容-->
    <goods-content-setting v-model:page-config="pageConfig" />

    <div class="divider" />

    <!--    排序筛选-->
    <goods-filter-setting v-model:page-config="pageConfig" />

    <div class="divider" />

    <!--    购买按钮-->
    <purchase-button-setting
      v-if="pageConfig.custom == '1' ||
        pageConfig.custom == '2' ||
        pageConfig.custom == '3'
      "
      v-model:page-config="pageConfig"
    />
    <div class="divider" />
    <div class="func">
      <p class="attr">
        角标设置
      </p>
      <ul class="common-ul">
        <li
          :class="pageConfig.dotSetting == '1' ? 'active' : ''"
          @click="pageConfig.dotSetting = '1'"
        >
          不显示
        </li>
        <li
          :class="pageConfig.dotSetting == '2' ? 'active' : ''"
          @click="pageConfig.dotSetting = '2'"
        >
          系统图标
        </li>
        <li
          :class="pageConfig.dotSetting == '3' ? 'active' : ''"
          @click="pageConfig.dotSetting = '3'"
        >
          自定义
        </li>
      </ul>
      <div v-if="pageConfig.dotSetting == '2'">
        <div class="adjust-item">
          <span>样式</span>
          <ul class="common-ul">
            <li
              :class="pageConfig.dotStyle == '1' ? 'active' : ''"
              @click="pageConfig.dotStyle = '1'"
            >
              <img
                src="../../../../../../assets/app/other/goods/hot.png"
                alt=""
              >
            </li>
            <li
              :class="pageConfig.dotStyle == '2' ? 'active' : ''"
              @click="pageConfig.dotStyle = '2'"
            >
              <img
                src="../../../../../../assets/app/other/goods/hot-2.png"
                alt=""
              >
            </li>
            <li
              :class="pageConfig.dotStyle == '3' ? 'active' : ''"
              @click="pageConfig.dotStyle = '3'"
            >
              <img
                src="../../../../../../assets/app/other/goods/hot-3.png"
                alt=""
              >
            </li>
          </ul>
        </div>
        <div class="adjust-item">
          <span>文字</span>
          <el-input
            v-model.trim="pageConfig.dotName"
            class="input-content"
            size="small"
            type="text"
            maxlength="2"
            :show-word-limit="true"
          />
        </div>
      </div>
      <div v-if="pageConfig.dotSetting == '3'">
        <h4>建议图片宽高76px*76px</h4>
        <div class="img-placeholder">
          <div
            v-if="pageConfig.dotUrl"
            class="upload-img"
          >
            <el-image
              style="width: 100%; height: 100%"
              :src="pageConfig.dotUrl"
              fit="contain"
            />
            <div class="upload-img_cover">
              <Upload
                :model-value="dotfileList"
                file-path="act/"
                :limit="999"
                :show-file-list="false"
                @success="dotFileSuccess"
              >
                <el-button size="small">
                  替换
                </el-button>
              </Upload>
            </div>
          </div>
          <Upload
            v-else
            v-model="pageConfig.dotUrl"
            file-path="actapp/"
            list-type="picture-card"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </Upload>
        </div>
      </div>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        组件边距
      </p>
      <div class="adjust-item">
        <span>商品间距</span>
        <el-slider
          v-model="pageConfig.distance"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>上边距</span>
        <el-slider
          v-model="pageConfig.marginTop"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下边距</span>
        <el-slider
          v-model="pageConfig.marginBottom"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>左右边距</span>
        <el-slider
          v-model="pageConfig.margin"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        圆角设置
      </p>
      <div class="adjust-item">
        <span>上圆角</span>
        <el-slider
          v-model="pageConfig.radiusTop"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下圆角</span>
        <el-slider
          v-model="pageConfig.radiusBottom"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "TabsOperation",
};
</script>
<script lang="ts" setup>
import {onMounted, Ref} from "vue";
import { ElNotification } from "element-plus";
import PurchaseButtonSetting
  from "@/views/activity/actApp/components/default/operationComponents/purchaseButtonSetting/PurchaseButtonSetting.vue";
import {
  IPurchaseButtonPageConfig,
  purchaseButtonPageConfig
} from "../operationComponents/purchaseButtonSetting";
import SelectGoodsSetting
  from "@/views/activity/actApp/components/default/operationComponents/selectGoodsSetting/SelectGoodsSetting.vue";
import {
  ISelectGoodsSettingPageConfig,
  selectGoodsSettingPageConfig
} from "../operationComponents/selectGoodsSetting";
import { useMallConfig } from "@/views/pointsMall/compositions/useMallConfig";
import GoodsContentSetting
  from "@/views/activity/actApp/components/default/operationComponents/goodsContentSetting/GoodsContentSetting.vue";
import {
  goodsContentSettingPageConfig, IGoodsContentSettingPageConfig
} from "../operationComponents/goodsContentSetting";
import {usePageConfig} from "@/views/activity/actApp/components/default/compositions/usePageConfig";
import GoodsFilterSetting
  from "@/views/activity/actApp/components/default/operationComponents/goodsFilterSetting/GoodsFilterSetting.vue";
import {
  goodsFilterPageConfig,
  IGoodsFilterPageConfig
} from "../operationComponents/goodsFilterSetting";
import TitleIcon from "@/assets/app/icon/tabbar.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";

interface IPageConfig extends IPurchaseButtonPageConfig, IGoodsContentSettingPageConfig, IGoodsFilterPageConfig {
  tabStyle: string;
  tabSelectedStyle: string;
  bgcolor: string;
  tabColor: string;
  unselectcolor: string;
  selectedcolor: string;
  // tabShow: boolean;
  tablineColor: string;
  subShow: boolean;
  unsubColor: string;
  selectedsubColor: string;
  // selectBg: string;
  selectBgColor: string
  // selectBgUrl: string;
  selectedBorderColor: string;
  tabDistance: number;
  tabMarginTop: number;
  tabMarginBottom: number;
  tabMargin: number;
  tabIndex: number;
  bgRadiusTop: number;
  bgRadiusBottom: number;
  style: string;
  borderWidth: number;
  borderColor: string;
  tabFontSize: number;
  custom: string;
  goodsColor: string;
  dotSetting: string;
  dotStyle: string;
  dotName: string;
  dotUrl: string;
  distance: number;
  marginTop: number;
  marginBottom: number;
  margin: number;
  radiusTop: number;
  radiusBottom: number;
  mallId: string;
  tabList: ITabItem[];
}

interface ITabItem extends ISelectGoodsSettingPageConfig{
  title: string;
  subtitle: string;
}

const config = withDefaults(defineProps<{
  pageConfig: IPageConfig
}>(), {
  pageConfig: () => ({
    tabStyle: '1',
    tabSelectedStyle: "bordered",
    bgcolor: "transparent",
    tabColor: "#fff",
    unselectcolor: "#666",
    selectedcolor: "#E03221",
    tablineColor: "#E03221",
    subShow: false,
    unsubColor: "#666",
    selectedsubColor: "#666",
    selectBgColor: "#E03221",
    selectedBorderColor: "#E03221",
    tabDistance: 20,
    tabMarginTop: 0,
    tabMarginBottom: 0,
    tabMargin: 0,
    tabIndex: 0,
    bgRadiusTop: 0,
    bgRadiusBottom: 0,
    style: "1",
    borderWidth: 1,
    borderColor: "#ededed",
    tabFontSize: 15,
    custom: "1",
    goodsColor: "#fff",
    dotSetting: "1",
    dotStyle: "1",
    dotName: "",
    dotUrl: "",
    distance: 10,
    marginTop: 0,
    marginBottom: 10,
    margin: 10,
    radiusTop: 4,
    radiusBottom: 4,
    mallId: '',
    tabList: [
      {
        title: "选项",
        subtitle: "副标题",
        ...selectGoodsSettingPageConfig,
      },
      {
        title: "选项",
        subtitle: "副标题",
        ...selectGoodsSettingPageConfig,
      },
    ],
    ...purchaseButtonPageConfig, // 购买按钮
    ...goodsContentSettingPageConfig, // 显示内容
    ...goodsFilterPageConfig, // 排序筛选
  })
})
const emits = defineEmits<{
  (e: "change-style", value: IPageConfig): void;
  (e: "update:page-config", value: IPageConfig): void;
}>();
const store = useStore();
const { pageConfig } = usePageConfig<IPageConfig>(config, emits)
const { mallConfig } = useMallConfig();

const changeTabStyle = (tabStyle: string) => {
  pageConfig.value.tabStyle = tabStyle;

  if (pageConfig.value.tabStyle === '1') {
    pageConfig.value.custom = '1';
    pageConfig.value.distance = 10;
    pageConfig.value.marginTop = 10;
    pageConfig.value.marginBottom = 10;
    pageConfig.value.margin = 10;
    pageConfig.value.radiusTop = 4;
    pageConfig.value.radiusBottom = 4;
  }

  if (pageConfig.value.tabStyle === '2') {
    pageConfig.value.custom = '2';
    pageConfig.value.distance = 0;
    pageConfig.value.marginTop = 0;
    pageConfig.value.marginBottom = 0;
    pageConfig.value.margin = 0;
    pageConfig.value.radiusTop = 0;
    pageConfig.value.radiusBottom = 0;
  }
}

const changeTabSelectedStyle = (value: string) => {
  const defaultMainColor = "#E03221"
  if (value === 'bordered') {
    config.pageConfig.selectedcolor = defaultMainColor;
    config.pageConfig.selectedBorderColor = defaultMainColor;
  } else if (value === 'underline') {
    config.pageConfig.selectedcolor = defaultMainColor;
    config.pageConfig.tablineColor = defaultMainColor;
  } else if (value === 'innerBg') {
    config.pageConfig.selectedcolor = "#FFFFFF";
    config.pageConfig.selectBgColor = defaultMainColor;
  } else {
    console.log("未知选中样式")
  }
}

const currentIndex = ref(0);
const isShowTabSetting = ref(true);

const addTab = () => {
  pageConfig.value.tabList.push({
    title: "选项",
    subtitle: "副标题",
    ...selectGoodsSettingPageConfig,
  });
  pageConfig.value.tabIndex = pageConfig.value.tabList.length - 1;
  chooseIndex(pageConfig.value.tabIndex)
};

const removeTab = (index: number) => {
  if (pageConfig.value.tabList.length <= 2) {
    ElNotification.error("至少要有2个Tab")
    return;
  }

  pageConfig.value.tabList.splice(index, 1);
  chooseIndex(pageConfig.value?.tabList.length - 1)
};

const moveTo = (type: "up" | "down", index: number) => {
  const list = [...pageConfig.value.tabList]
  const item = list[index]
  //上移
  if (type == 'up') {
    const preItem = list[index - 1]
    list[index - 1] = item
    list[index] = preItem
  }
  //下移
  if (type == 'down') {
    const nextItem = list[index + 1]
    list[index + 1] = list[index]
    list[index] = nextItem
  }
  pageConfig.value.tabList = [...list]
}

const chooseIndex = (index: number) => {
  pageConfig.value.tabIndex = index;
  const tabConfig = pageConfig.value.tabList[index]
  tabConfig.imgList.mallId = mallConfig.value.id;
  currentIndex.value = index;
};

const dotfileList:Ref<any[]> = ref([]);

const dotFileSuccess = (value: any) => {
  pageConfig.value.dotUrl = value.url;
};

onMounted(async () => {
  pageConfig.value.mallId = store.state.pointsMall.mallConfig.id;
  chooseIndex(pageConfig.value?.tabIndex ?? 0)
})
</script>

<style lang="scss" scoped>
//.style-div-container {
//  display: flex;
//  flex-direction: row;
//
//  .style-div {
//    margin: 12px;
//    background: #fff;
//    text-align: center;
//
//    img {
//      display: block;
//      max-width: 100%;
//      max-height: 100%;
//      margin-bottom: 10px;
//    }
//  }
//}


.title {
  padding: 8px 23px;
  overflow: hidden;
  border-bottom: 5px solid #f6f7f9;
  display: flex;
  position: relative;
  height: 50px;
  box-sizing: border-box;

  img {
    position: absolute;
    left: 0;
    top: -5px;
  }

  h5 {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 50px;
  }
}

.func {
  border-bottom: 5px solid #f6f7f9;
  padding: 20px 16px;
  font-size: 16px;

  .extra-li {
    justify-content: center;
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 10px 10px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
  }

  .attr {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px;

    span {
      font-size: 14px;
      font-weight: 400;
      color: red;
    }
  }

  ul.common-ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      flex: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0 0 4px;
      border: 2px solid #ededed;
      border-collapse: collapse;

      &.active {
        border: 2px solid #fb6638;
      }

      img {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }

  h4 {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: red;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }

  div.adjust-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;

    span {
      width: 64px;
      text-align: right;
      margin-right: 15px;
      color: #666;
    }

    :deep(.el-slider) {
      width: 240px;
      margin-right: 3px;
      margin-left: 15px;
    }

    :deep(.el-checkbox) {
      width: 100px;
      margin-right: 13px;
    }

    :deep(.el-color-picker) {
      margin-right: 13px;
    }

    :deep(.el-slider__runway.show-input) {
      margin-right: 15px;
    }

    :deep(.el-input-number) {
      width: 100px;
      background: #f4f3f7;
      border: 1px solid #f4f3f7;
    }

    .style-btn {
      width: 240px;
      height: 36px;
      font-size: 12px;
      line-height: 36px;
      text-align: center;
      background-color: #001E70;
      color: #fff;
      margin-right: 5px;
      cursor: pointer;
    }

    .style-word {
      font-size: 12px;
    }

    .input-content {
      width: 200px;
    }

    .common-ul {
      width: 200px;
    }
  }

  .extra-div {
    justify-content: center;
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 10px 10px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
  }

  .add-item2 {
    width: 100%;
    display: flex;
    list-style: none;
    flex-wrap: wrap;

    .img-list {
      background: transparent;
      padding: 10px;
      margin-bottom: 0;

      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .add-item {

    li {
      background: #f4f3f7;
      border-radius: 4px;
      padding: 10px 20px 10px 10px;
      color: #999;
      border: 1px solid #f4f3f7;
      margin-top: 10px;
      margin-bottom: 20px;
      position: relative;
      display: flex;

      &.active {
        border: 1px solid red;
      }

      .link-div {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        background: #e8effc;
        border: 0;
        padding-left: 16px;
        cursor: pointer;
        position: relative;

        :deep(.el-icon) {
          margin-right: 10px;
        }

        :deep(.el-input) {
          font-size: 12px;
          height: 30px;
          width: calc(100% - 30px);
        }

        .close-btn {
          position: absolute;
          right: 5px;
        }
      }

      .sure-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }

      .remove {
        display: none;
        top: 12px;
        cursor: pointer;
        position: absolute;
        right: 5px;
        color: red;
      }

      &:hover {
        .remove {
          display: block;
        }
      }
    }
  }
}

.func-expandable {
  .attr-expandable {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;

    .triangle-icon {
      width: 0;
      height: 0;
      border-top: solid 10px #333;
      border-bottom: solid 10px transparent;
      border-left: solid 10px transparent;
      border-right: solid 10px transparent;
      margin: 0 10px;
      transform: translateY(25%);
    }

    .triangle-icon__reverse {
      transform: rotate(180deg) translateY(25%);
    }
  }

  .add-item-shrink {
    height: 0px;
    overflow: hidden;
  }
}

:deep(.el-radio__label) {
  font-size: 16px;
}

.img-placeholder {
  width: 80px;
  height: 80px;
}

.upload-img {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-right: 10px;
  border: 1px dashed #ededed;
  text-align: center;
  color: #dad9d9;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  float: left;
  position: relative;

  :deep(.el-image) {
    width: 80px;
    height: 80px;
  }

  &:hover {
    .upload-img_cover {
      opacity: 1;
    }
  }

  .upload-img_cover {
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
}

:deep(.el-upload-list) {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
}

.gray {
  background-color: #f4f3f7;
}

//.goods-div-container {
//  ul {
//    display: flex;
//    flex-wrap: wrap;
//
//    li {
//      width: calc(33.3% - 10px);
//      margin-right: 10px;
//      margin-bottom: 10px;
//      height: 76px;
//      border: 1px solid #eee;
//      display: flex;
//      align-items: center;
//      padding: 0 12px;
//      box-sizing: border-box;
//
//      img {
//        width: 50px;
//        height: 50px;
//        margin-right: 10px;
//      }
//
//      h4 {
//        max-height: 50px;
//        overflow: hidden;
//        text-overflow: ellipsis;
//        -webkit-line-clamp: 2;
//        -webkit-box-orient: vertical;
//        display: -webkit-box;
//        font-size: 14px;
//        color: #333;
//      }
//
//      p {
//        font-size: 14px;
//        line-height: 20px;
//        color: #fb6638;
//        display: flex;
//
//        span {
//          font-size: 12px;
//          transform: scale(0.8);
//        }
//      }
//
//      &.active {
//        border: 1px solid #fb6638;
//      }
//    }
//  }
//}

.adjust-item__start__radio {
  align-items: flex-start !important;

  .adjust-item__title {
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    flex-shrink: 0;
  }
}

.move-buttons {
  position: absolute;
  top: 5px;
  right: 24px;

  .icon-btn {
    margin-left: 5px;
    cursor: pointer;
  }
}


.sub-options {
  .sub-option {
    background: #f4f3f7;
    padding: 10px;
    display: flex;
    align-items: center;

    .label {
      color: #999;
    }

    .label__88 {
      width: 88px;
      flex-shrink: 0;
    }

    .control-component {
      margin: 0 10px;
      flex: 1;
    }

    .value {
      color: #999;
    }
  }
}

.tab-selected {
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

.tab-selected__bordered {
  //border: solid 1px #E03221;
  color: #E03221;
  padding: 5px 10px;
}

.tab-selected__underline {
  color: #E03221;
  padding-bottom: 10px;
  position: relative;
}

.tab-selected__underline:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #E03221;
}

.tab-selected__innerBg {
  background: #E03221;
  color: white;
  padding: 4px 24px;
  border-radius: 24px;
}
</style>
